import React from 'react'
// 引入获取redux数据的hook和返回dispatch函数的hook
// useSelector 返回redux中我们过滤之后的数据
// useDispatch 返回store的dispatch方法
// import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux'

//引入actionCreator
import { add, sub, asyncCount } from '../redux/store'
import { useAppDispatch, useAppSelector } from '../redux/hooks'

export default function Count() {
  // countState 其实就是useSelector中回调函数的返回值,也就是过滤之后的数据
  const countState = useAppSelector((state) => {
    // state 是redux中所有的数据
    return state.count
  })
  // 就是store的dispatch
  const dispatch = useAppDispatch()
  return (
    <div>
      count组件
      <hr />
      <p>{countState.c}</p>
      <p>{countState.msg}</p>
      <button
        onClick={() => {
          //   dispatch({ type: 'count/add', })
          // add是countSlice中自动创建的actionCreator,返回的就是一个action对象
          console.log(add(undefined))
          dispatch(add(undefined))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(sub(3))
          //   dispatch({ type: 'count/sub', num: 3 })
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          dispatch(asyncCount())
        }}
      >
        async *
      </button>
    </div>
  )
}
